<div class="col-sm-{{::col}} at-InputContainer">
    <div class="form-group at-u-flat">
        <at-input-label></at-input-label>

        <div class="input-group">
            <span ng-if="state.tagMode" class="input-group-btn input-group-prepend">
                <button
                  aria-label="{{:: vm.strings.get('lookup.PERFORM_LOOKUP')}}"
                  class="btn at-ButtonHollow--default at-Input-button"
                  ng-disabled="state._disabled || form.disabled"
                  ng-click="vm.onLookupClick()">
                    <i class="fa fa-search"></i>
                </button>
            </span>
            <span
              ng-if="state.tagMode && state.asTag"
              ng-disabled="state._disabled || form.disabled"
              class="form-control at-Input"
            >
              <div class="at-InputTagContainer">
                <at-tag
                  ng-show="(!state._disabled) && state._tagValue"
                  icon="external"
                  tag="state._tagValue"
                  remove-tag="state._onRemoveTag(state)"
                />
                <at-tag
                  ng-show="state._disabled && state._tagValue"
                  icon="external"
                  tag="state._tagValue"
                />
              </div>
            </span>
            <input ng-if="!state.asTag" type="{{ type }}"
                   class="form-control at-Input"
                   ng-model="state[state._activeModel]"
                   ng-class="{ 'at-Input--rejected': state._rejected }"
                   ng-attr-maxlength="{{ state.max_length || undefined }}"
                   ng-attr-tabindex="{{ tab || undefined }}"
                   ng-attr-placeholder="{{ state._promptOnLaunch ? '' : state._placeholder || undefined }}"
                   ng-change="vm.check()"
                   ng-disabled="state._disabled || form.disabled"
            />
            <span ng-show="mode == 'encrypted'" class="input-group-btn input-group-append">
                <button
                  aria-label="{{:: vm.strings.get('secret.REPLACE')}}"
                  class="btn at-ButtonHollow--default at-Input-button"
                  ng-disabled="state.asTag || (!state._enableToggle && (state._disabled || form.disabled))"
                  ng-click="vm.toggleRevertReplace()"
                  aw-tool-tip="{{ state._buttonText }}"
                  data-tip-watch="state._buttonText"
                  data-placement="top">
                    <i ng-show="!state._isBeingReplaced" class="fa fa-undo"></i>
                    <i ng-show="state._isBeingReplaced" class="fa fa-undo fa-flip-horizontal"></i>
                </button>
            </span>
            <span class="input-group-btn input-group-append">
                <button
                  aria-label="Toggle show/hide text"
                  class="btn at-ButtonHollow--default at-Input-button"
                  ng-disabled="state.asTag || state._disabled || form.disabled"
                  ng-click="vm.toggleShowHide()"
                  aw-tool-tip="{{ state._showHideText }}"
                  data-tip-watch="state._showHideText"
                  data-placement="top">
                    <i ng-show="!state._show" class="fa fa-eye"></i>
                    <i ng-show="state._show" class="fa fa-eye-slash"></i>
                </button>
            </span>
        </div>

        <at-input-message></at-input-message>
    </div>
</div>
